<template>
  <div class="order-details">
    <div class="info-wrap">
      <div class="title-wrap">
        <div class="order-info-title">订单信息</div>
        <div class="receiver-info-title">收件人信息</div>
      </div>

      <div class="content-wrap">
        <!-- 线上待付款 -->
        <div v-if="false" class="order-info-content">
          <div class="texts">
            <div class="item order-number">订单号：8932832893298</div>
            <div class="item order-status">
              <img class="icon" src="~/assets/images/blue-exclamation-mark.png" alt="">
              订单状态：待付款
            </div>
            <div class="item order-prompt">您还有57分32秒;来付款,超时订单自动关闭</div>
            <div class="item order-payment">支付方式：线上支付</div>
          </div>
          <div class="btn">立即付款</div>
        </div>

        <!-- 线下待付款 -->
        <div v-if="false" class="order-info-content">
          <div class="texts">
            <div class="item order-number">订单号：8932832893298</div>
            <div class="item order-status">
              <img class="icon" src="~/assets/images/blue-exclamation-mark.png" alt="">
              订单状态：待付款
            </div>
            <div class="item order-prompt">您还有57分32秒;来付款,超时订单自动关闭</div>
            <div class="item order-payment">支付方式：线上支付</div>
            <div class="item order-identifier">
              订单识别码：
              <p style="font-size: 30px; line-height: 28px; color: #077CD3; font-weight: bold">SDF56</p>
            </div>
            <div class="item order-upload" style="display: flex; align-items: flex-start; margin-top: 20px;">
              请上传支付凭证：
              <Upload
                action="#"
                list-type="picture-card"
                :auto-upload="false"
                :limit="1"
              >
                <img src="~/assets/images/add.png" alt="add-icon">
                <div slot="file" slot-scope="{file}">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url" alt=""
                  >
                  <span class="close">x</span>
                </div>
              </Upload>
            </div>
          </div>
          <div class="btn">立即付款</div>
        </div>

        <!-- 待发货 -->
        <div v-if="false" class="order-info-content">
          <div class="texts">
            <div class="item order-number">订单号：8932832893298</div>
            <div class="item order-status">
              <img class="icon" src="~/assets/images/yellow-success-mark.png" alt="">
              订单状态：已付款，等待商家发货
            </div>
            <div class="item order-payment">支付方式：线上支付</div>
          </div>
          <div class="btn">协商取消</div>
        </div>

        <!-- 待收货 -->
        <div v-if="false" class="order-info-content">
          <div class="texts">
            <div class="item order-number">订单号：8932832893298</div>
            <div class="item order-status">
              <img class="icon" src="~/assets/images/yellow-success-mark.png" alt="">
              订单状态：商家已发货，等待用户收货
            </div>
            <div class="item order-payment">支付方式：线上支付</div>
          </div>
          <div class="btns" style="display: flex;">
            <div class="btn"
              style="background-color: #fff; color: #E48B2C; border: solid 1px #E48B2C; margin-right: 10px;">查看物流
            </div>
            <div class="btn">确认收货</div>
          </div>
        </div>

        <!-- 已关闭 -->
        <div v-if="false" class="order-info-content">
          <div class="texts">
            <div class="item order-number">订单号：8932832893298</div>
            <div class="item order-status">
              <img class="icon" src="~/assets/images/blue-exclamation-mark.png" alt="">
              订单状态：已关闭
            </div>
          </div>
          <div class="btn">删除</div>
        </div>

        <!-- 已完成 -->
        <div v-if="false" class="order-info-content">
          <div class="texts">
            <div class="item order-number">订单号：8932832893298</div>
            <div class="item order-status">
              <img class="icon" src="~/assets/images/yellow-success-mark.png" alt="">
              订单状态：已完成
            </div>
            <div class="item order-payment">支付方式：线上支付</div>
          </div>
          <div class="btn" @click="pushToEvaluation">立即评价</div>
        </div>

        <!-- 线下待付款 -->
        <div v-if="false" class="order-info-content">
          <div class="texts">
            <div class="item order-number">订单号：8932832893298</div>
            <div class="item order-status">
              <img class="icon" src="~/assets/images/yellow-success-mark.png" alt="">
              订单状态：待付款
            </div>
            <div class="item order-payment">支付方式：线上支付</div>
            <div class="item date">商家确定日期：2020-03-04</div>
            <div class="item annex" style="display: flex; align-items: center;">
              附件：
              <img src="~/assets/images/my-order1.png" alt="" style="margin-right: 40px;">
              <m-button type="bordered" size="mini">下载</m-button>
            </div>
            <div class="item remarks">文件备注：您的xxxxx，链接是xxxxxx</div>
          </div>
        </div>

        <!-- 寄送单号 -->
        <div v-if="true" class="order-info-content">
          <div class="texts">
            <div class="item order-number">订单号：8932832893298</div>
            <div class="item order-status">
              <img class="icon" src="~/assets/images/yellow-success-mark.png" alt="">
              订单状态：等待商家确认交付日期
            </div>
            <div class="item order-payment">支付方式：线上支付</div>
            <div class="item express-company">
              <Row style="width: 100%;">
                <Col :span="12">
                  <m-select :selected.sync="selected" :options="expressOptions"/>
                </Col>
                <Col :span="11" style="margin-left: 10px;">
                  <m-button width="90" type="bordered">协商取消</m-button>
                </Col>
              </Row>
            </div>
            <div class="item input">
              <Row style="width: 100%;">
                <Col :span="12">
                  <m-input/>
                </Col>
                <Col :span="11" style="margin-left: 10px;">
                  <m-button width="90">提交</m-button>
                </Col>
              </Row>
            </div>
          </div>
        </div>

        <div class="receiver-info-content">
          <div class="texts">
            <div class="item receiver-name">收货人：张三</div>
            <div class="item receiver-mobile">电话：137343443556</div>
            <div class="item receiver-company"> 公司：成都微微尔科技</div>
            <div class="item receiver-address">地址：广东省 河源市 龙川县 成都市高新区天府二街绿地之窗1007房</div>
            <div class="item receiver-remarks">备注信息：备注信息</div>
          </div>
        </div>
      </div>
    </div>

    <Table class="table-head">
      <table-column label="产品信息" align="center"/>
      <table-column label="单价" align="center" width="200"/>
      <table-column label="数量" align="center" width="100"/>
      <table-column label="实付款" align="center" width="100"/>
      <table-column label="订单状态" align="center" width="100"/>
      <table-column label="操作" align="center" width="100"/>
    </Table>

    <div class="order-head">
      <div class="left">
        <div class="order-merchant">商家：{{ details.merchant }}</div>
        <div class="order-number">订单号：{{ details.order }}</div>
      </div>
      <div class="right">
        <div v-if="details.status === '5'" class="order-after-sale">售后</div>
        <div class="order-time">{{ details.time }}</div>
      </div>
    </div>

    <Table class="order-table"
      :data="details.data"
      :border="true"
      :show-header="false"
      :span-method="({ columnIndex }) => spanMethod(columnIndex, details.data.length)">

      <table-column prop="name" label="产品信息" align="center">
        <template v-slot="{ row }">
          <div style="display: flex; align-items: center;">
            <img :src="row.img" alt="" style="width: 130px; height: 130px; margin-right: 15px;">
            {{ row.name }}
          </div>
        </template>
      </table-column>

      <table-column prop="price" label="单价" align="center" width="200">
        <template v-slot="{ row }">
          ￥{{ row.price }}
        </template>
      </table-column>

      <table-column prop="count" label="数量" align="center" width="100">
        <template v-slot="{ row }">
          ×{{ row.count }}
        </template>
      </table-column>

      <table-column prop="total" label="实付款" align="center" width="100">
        <template>
          ￥{{ details.total }}
        </template>
      </table-column>

      <table-column prop="status" label="订单状态" align="center" width="100">
        <template>
          <div>{{ details.status | statusText }}</div>
          <div v-if="details.status !== '-1'">{{ details.online ? '线上' : '线下' }}</div>
        </template>
      </table-column>

      <table-column prop="action" label="操作" align="center" width="100">
        <template>
          <a class="pay" href='javascript:;' v-if="details.status === '0'" @click.prevent="">立即付款</a>
          <a href="javascript:;" v-if="details.status === '-1'" @click.prevent="">
            <img src="~/assets/images/delete-btn.png" alt="">
            <p>删除</p>
          </a>
        </template>
      </table-column>
    </Table>

    <div class="dialog">
      <!-- 商家联系方式弹窗 -->
      <m-dialog v-if="false" :showDialog.sync="showDialog" title="商家联系方式">
        <template v-slot>
          <div class="content">
            <div class="item"><img src="~/assets/images/contact-person.png" alt="">联系人：狗蛋</div>
            <div class="item"><img src="~/assets/images/contact-phone.png" alt="">联系电话：2315435131324</div>
          </div>
          <div class="bottom">
            <m-button width="143px">关闭</m-button>
          </div>
        </template>
      </m-dialog>

      <!-- 确认收货弹窗 -->
      <m-dialog v-if="false" :showDialog.sync="showDialog" title="确认收货">
        <template v-slot>
          <div class="confirm-dialog-content">
            <Row type="flex" justify="center">
              <Col :span="18">
                <Col :span="6">手机号：</Col>
                <Col :span="9">183****1233</Col>
                <Col :span="9">
                  <m-button width="120" type="bordered">获取验证码</m-button>
                </Col>
              </Col>
            </Row>
            <Row type="flex" justify="center">
              <Col :span="18">
                <Col :span="6">验证码：</Col>
                <Col :span="18">
                  <m-input style="width: 100%"/>
                </Col>
              </Col>
            </Row>
            <Row type="flex" justify="center">
              <Col :span="8" style="margin-top: 40px;">
                <m-button width="143">确定</m-button>
              </Col>
            </Row>
          </div>
        </template>
      </m-dialog>

      <!-- 取消弹窗 -->
      <m-dialog v-if="true" :showDialog.sync="showDialog" title="平台提醒">
        <template v-slot>
          <p style="margin-bottom: 15px;">请填写取消原因</p>
          <m-input type="textarea"/>
        </template>
      </m-dialog>
    </div>
  </div>
</template>

<script>
import { Col, Dialog, Input, Row, Table, TableColumn, Upload } from 'element-ui'
// import { getDetails } from '@/api/material'
import MDialog from '@/components/common/m-dialog/MDialog'
import MInput from '@/components/common/m-input/MInput'
import MButton from '@/components/common/m-button/MButton'
import MSelect from '@/components/common/m-select/MSelect'

export default {
  name: 'OrderDetails',
  components: { MSelect, MButton, MInput, MDialog, Table, TableColumn, Upload, Dialog, Input, Row, Col },
  data() {
    return {
      orderId: '',
      details: {},
      showDialog: false,
      expressOptions: [
        { label: '无需快递', value: 'none' },
        { label: '顺丰快递', value: 'shunfeng' },
        { label: '中通快递', value: 'zhongtong' }
      ],
      selected: ''
    }
  },
  watch: {
    selected(val) {
      console.log(val)
    }
  },
  filters: {
    statusText(status) {
      return {
        '1': '已支付',
        '0': '待付款',
        '-1': '已关闭',
        '2': '待发货',
        '3': '待收货',
        '4': '待评价',
        '5': '已完成'
      }[status]
    }
  },
  methods: {
    spanMethod(columnIndex, length) {
      if ([3, 4, 5].includes(columnIndex)) {
        return {
          colspan: 1,
          rowspan: length
        }
      }
    },
    closeImg() {

    },
    pushToEvaluation() {
      this.showDialog = true

      // this.$router.push({
      //   name: 'ServiceEvaluation',
      //   query: { id: this.orderId }
      // })
    }
  },
  created() {
    this.orderId = this.$route.query.id

    // getDetails().then(res => {
    //   this.details = res.data.data
    // })
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.order-details {
  padding-bottom: 200px;

  .info-wrap {
    border: solid 1px #eaeaea;
    margin-bottom: 40px;

    .title-wrap {
      height: 56px;
      background-color: #F3F4F7;
      color: #666;
      font-weight: bold;
      font-size: 16px;
      line-height: 56px;
      padding: 0 15px;
      display: flex;

      .order-info-title, .receiver-info-title {
        width: 50%;
      }

      .receiver-info-title {
        padding-left: 15px;
      }
    }

    .content-wrap {
      display: flex;

      .order-info-content, .receiver-info-content {
        padding: 30px;
        width: 50%;
        border-right: solid 1px #eaeaea;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        &:last-of-type {
          border-right: none;
        }

        .texts {
          width: 100%;
          margin-bottom: 40px;

          .item {
            margin-bottom: 10px;
            display: flex;
            align-items: flex-end;

            .icon {
              margin-right: 5px;
            }
          }

          /deep/ .el-upload--picture-card {
            width: 73px;
            height: 73px;
            background-color: #fff;
            border: none;
            position: relative;
          }

          .close {
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            text-align: center;
            line-height: 18px;
            color: #D1D1D1;
            border: 1px solid #D1D1D1;
            background: #fff;
          }
        }

        .btn {
          width: 112px;
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: $theme-color-1;
          color: #fff;
          font-size: 16px;
          border-radius: 10px;
          cursor: pointer;
        }
      }
    }
  }

  .table-head {
    background-color: #F3F4F7;
    margin-bottom: 40px;

    /deep/ .el-table__body-wrapper {
      height: 0;
    }

    /deep/ th {
      color: #666;
      background-color: #F3F4F7;
    }
  }

  .order-head {
    height: 40px;
    background-color: #F3F4F7;
    color: #666;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    .left, .right {
      display: flex;
      align-items: center;
    }

    .order-merchant, .order-after-sale {
      margin-right: 25px;
    }

    .order-after-sale {
      width: 85px;
      height: 30px;
      background-color: #fff;
      border-radius: 10px;
      font-size: 16px;
      line-height: 30px;
      text-align: center;
      cursor: pointer;
    }
  }

  .pay {
    display: inline-block;
    width: 80px;
    height: 30px;
    background-color: $theme-color-1;
    color: #fff;
    border-radius: 10px;
    line-height: 30px;
    text-align: center;
  }

  .dialog {
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 40px;

      .item {
        width: 240px;
        margin-bottom: 15px;
        display: flex;
        align-items: center;

        img {
          margin-right: 15px;
        }
      }
    }

    .bottom {
      display: flex;
      justify-content: center;
      margin-bottom: 15px;

      .btn {
        width: 260px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        background-color: $theme-color-1;
        border-radius: 10px;
      }
    }

    // 确认收货弹窗
    .confirm-dialog-content {
      .el-row {
        margin-bottom: 20px;

        .el-col {
          display: flex;
          align-items: center;
        }
      }
    }
  }
}
</style>
